<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单向数据绑定</title>
    <script type="text/javascript" src="../lib/vue/dist/vue.js"></script>
</head>
<style>

    .pc{

        background-color: red;

    }

    .active{

       color: chartreuse;

    }

    .px{

        background-color: pink;

    }





</style>
<body>

<div id="app">

    <h2 class="pc" :class="{active:isActive,px:isPx}">数据绑定</h2>

    <button @click="change">切换效果</button>

</div>

<script>

 var app = new Vue({

     el:"#app",
     template:"",
     data:function () {

         return{

             isActive:true,
             isPx:false

         }
     },

     methods:{

         change:function () {

             this.isActive = !  this.isActive;
             this.isPx = !this.isPx

         }

     }



 });


</script>




</body>
</html>